GraphQL Integration এর জন্য Apollo Client ব্যবহার

Apollo Client হল একটি জনপ্রিয় লাইব্রেরি যা React Native (এবং React) অ্যাপ্লিকেশনে GraphQL API ইন্টিগ্রেট করতে ব্যবহৃত হয়। Apollo Client ব্যবহার করে আপনি সহজেই GraphQL কুয়েরি এবং মিউটেশন সম্পাদন করতে পারেন, এবং আপনার অ্যাপ্লিকেশন স্টেটে ডেটা ম্যানেজ করতে পারেন। এটি রিয়েল-টাইম ডেটা আপডেট, কুয়েরি ক্যাশিং, এবং ডেটা ফেচিংয়ের জন্য অত্যন্ত শক্তিশালী টুল।

নিচে Apollo Client এর মাধ্যমে GraphQL ইন্টিগ্রেশন কিভাবে করবেন, তা বিস্তারিতভাবে আলোচনা করা হলো।

১. প্রকল্পে Apollo Client ইনস্টলেশন

প্রথমে আপনার React Native প্রোজেক্টে Apollo Client এবং GraphQL লাইব্রেরি ইনস্টল করতে হবে।

npm install @apollo/client graphql

এটি দুটি লাইব্রেরি ইনস্টল করবে:

• @apollo/client: Apollo Client এর মূল লাইব্রেরি।
• graphql: GraphQL এর কোড পার্সিং ও অপারেশন সম্পাদনের জন্য ব্যবহার হয়।

২. Apollo Client কনফিগারেশন

Apollo Client কনফিগার করতে, আপনাকে ApolloClient কনস্ট্রাক্টর ব্যবহার করে GraphQL এন্ডপয়েন্টের URL সেট করতে হবে এবং ApolloProvider কম্পোনেন্টের মাধ্যমে আপনার অ্যাপ্লিকেশনে তা পাস করতে হবে।

import React from 'react';
import { ApolloProvider, InMemoryCache, ApolloClient } from '@apollo/client';
import { View, Text } from 'react-native';
import App from './App';

// Apollo Client কনফিগারেশন
const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint.com/graphql', // GraphQL এন্ডপয়েন্ট URL
  cache: new InMemoryCache(), // ইন-মেমোরি ক্যাশ
});

const Root = () => (
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>
);

export default Root;

এখানে কী হচ্ছে:

• ApolloClient কনস্ট্রাক্টর তৈরি করা হয়েছে এবং এতে GraphQL সার্ভারের URL পাস করা হয়েছে।
• ApolloProvider একটি কন্টেইনার যা Apollo Client এর কনফিগারেশনকে অ্যাপ্লিকেশন জুড়ে উপলব্ধ করে দেয়।

৩. GraphQL কুয়েরি পাঠানো

এখন আপনি অ্যাপ্লিকেশনের যে কোন অংশে GraphQL কুয়েরি পাঠাতে পারেন। এজন্য useQuery হুক ব্যবহার করা হয় যা Apollo Client থেকে ডেটা ফেচ করে এবং তা আপনার কম্পোনেন্টে পাস করে।

এটি একটি উদাহরণ যেখানে একটি GraphQL কুয়েরি করা হচ্ছে:

import React from 'react';
import { View, Text } from 'react-native';
import { useQuery, gql } from '@apollo/client';

// GraphQL কুয়েরি
const GET_USERS = gql`
  query {
    users {
      id
      name
      email
    }
  }
`;

const App = () => {
  const { loading, error, data } = useQuery(GET_USERS);

  if (loading) return <Text>Loading...</Text>;
  if (error) return <Text>Error! {error.message}</Text>;

  return (
    <View>
      {data.users.map((user) => (
        <View key={user.id}>
          <Text>{user.name}</Text>
          <Text>{user.email}</Text>
        </View>
      ))}
    </View>
  );
};

export default App;

এখানে কী হচ্ছে:

• GET_USERS একটি GraphQL কুয়েরি যা users ফিল্ডের তথ্য (যেমন id, name, এবং email) ফেচ করে।
• useQuery(GET_USERS) ব্যবহার করে ডেটা ফেচ করা হয় এবং ফলস্বরূপ loading, error, এবং data স্টেট পাওয়া যায়। এগুলির মাধ্যমে আপনি লোডিং, ত্রুটি, এবং ডেটা প্রদর্শন করতে পারেন।

৪. GraphQL মিউটেশন (Mutation)

Apollo Client শুধু কুয়েরি নয়, মিউটেশনও হ্যান্ডল করতে পারে। মিউটেশন ব্যবহার করে আপনি ডেটা পরিবর্তন করতে পারেন, যেমন নতুন ইউজার তৈরি করা বা বিদ্যমান ইউজারের তথ্য আপডেট করা।

এটি একটি উদাহরণ যেখানে একটি নতুন ইউজার তৈরি করা হচ্ছে:

import React, { useState } from 'react';
import { View, TextInput, Button, Text } from 'react-native';
import { useMutation, gql } from '@apollo/client';

// GraphQL মিউটেশন
const ADD_USER = gql`
  mutation AddUser($name: String!, $email: String!) {
    addUser(name: $name, email: $email) {
      id
      name
      email
    }
  }
`;

const App = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [addUser, { loading, error, data }] = useMutation(ADD_USER);

  const handleSubmit = () => {
    addUser({ variables: { name, email } });
  };

  if (loading) return <Text>Adding user...</Text>;
  if (error) return <Text>Error! {error.message}</Text>;

  return (
    <View>
      <TextInput
        placeholder="Name"
        value={name}
        onChangeText={setName}
        style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
      />
      <TextInput
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
        style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 10 }}
      />
      <Button title="Add User" onPress={handleSubmit} />
      {data && (
        <View>
          <Text>User Added:</Text>
          <Text>{data.addUser.name}</Text>
          <Text>{data.addUser.email}</Text>
        </View>
      )}
    </View>
  );
};

export default App;

এখানে কী হচ্ছে:

• ADD_USER একটি GraphQL মিউটেশন যা ইউজারের নাম এবং ইমেইল ব্যবহার করে নতুন ইউজার তৈরি করে।
• useMutation(ADD_USER) ব্যবহার করে মিউটেশন কার্যকর করা হয় এবং এর মাধ্যমে loading, error, এবং data স্টেট পাওয়া যায়।

৫. Apollo Client এর ক্যাশিং (Caching)

Apollo Client InMemoryCache ব্যবহার করে ডেটা ক্যাশিং করে রাখে, যাতে পরবর্তী কুয়েরি পাঠানোর সময় ডেটা দ্রুত পাওয়া যায়। ক্যাশিং Apollo Client এর একটি শক্তিশালী বৈশিষ্ট্য, যা অ্যাপ্লিকেশনের পারফরম্যান্স এবং ডেটা রিডাকশন করে।

আপনি কাস্টম ক্যাশ কনফিগারেশন সেট করতে পারেন বা ক্যাশের নীতি নির্ধারণ করতে পারেন যেমন force-fetch বা no-cache।

ক্যাশ কনফিগারেশন উদাহরণ:

const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint.com/graphql',
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          users: {
            merge(existing = [], incoming) {
              return [...existing, ...incoming];
            },
          },
        },
      },
    },
  }),
});

সারাংশ

• Apollo Client সহজে GraphQL ইন্টিগ্রেশন করতে সাহায্য করে React Native অ্যাপ্লিকেশনে।
• useQuery এবং useMutation হুকগুলি কুয়েরি এবং মিউটেশন পরিচালনার জন্য ব্যবহৃত হয়।
• InMemoryCache ব্যবহার করে ডেটা ক্যাশিং করে দ্রুত পারফরম্যান্স অর্জন করা সম্ভব।
• Apollo Client আপনার অ্যাপ্লিকেশনকে গ্রাফিক্যাল API এর সাথে ইন্টারঅ্যাক্ট করতে সহায়ক, যেমন ডেটা ফেচিং, মিউটেশন সম্পাদন, এবং রিয়েল-টাইম ডেটা আপডেট।

এটি React Native অ্যাপ্লিকেশনগুলির জন্য একটি অত্যন্ত কার্যকরী টুল।